<template>
    <div class="all">
        <div class="tit">咨询销售排行榜</div>
        <div class="top">
            <div class="card" v-for="(item, index) in firstList" :key="index">
                <img v-if="item.zx_pic" :src="item.zx_pic" alt="">
                <img v-else src="../assets/imgs/avacter.png" alt="">
                <div class="name">{{ item.zxname || item.zxname2 }}</div>
                <div class="list">
                    <div class="list-left">
                        下单GMV
                    </div>
                    <div class="list-right">
                        {{ item.je }}
                    </div>
                </div>
                <div class="list">
                    <div class="list-left">
                        商品销量
                    </div>
                    <div class="list-right">
                        {{ item.xl }}
                    </div>
                </div>
            </div>
        </div>
        <div class="bot">
            <div class="bot-top">
                <div class="one">排名</div>
                <div class="two">销量</div>
                <div class="three">下单GMV</div>
            </div>
            <div style="overflow-y: hidden;" ref="scrollViewRef">
                <div ref="listRef" v-for="(p, n) in 2" :key="n">
                    <div class="bot-bot" v-for="(item, index) in twoList" :key="index">
                        <div class="one">
                            <div style="margin: 0 .3125rem;font-size: calc(100vw * 20 / 1920);width: fit-content;">No. <span style="font-size: calc(100vw * 16 / 1920);font-weight: bold;">{{ index+4 }}</span> </div>
                            <img v-if="item.zx_pic" class="avcter" :src="item.zx_pic" alt="">
                            <img v-else class="avcter" src="../assets/imgs/avacter.png" alt="">
                            <div>{{ item.zxname || item.zxname2 }}</div>
                        </div>
                        <div class="two">{{ item.xl }}</div>
                        <div class="three">{{ item.je }}</div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, onUpdated, nextTick, onBeforeUnmount } from "vue";
import { getzxphList } from "../api/api";




const firstList = ref([]) //前三名
const twoList = ref([]) //列表数据

const listRef = ref(); //列表dom
const scrollViewRef = ref(); //滚动区域dom
let intervalId = null;
let auto = null;


onMounted(async() => {
    await loadData()
    auto = setInterval(() => {
        loadData()
    }, 10000);
    nextTick(() => {
        autoScrolling()
    })
})


//设置自动滚动
const autoScrolling = () => {
    intervalId = setInterval(() => {
        if (scrollViewRef.value.scrollTop < listRef.value[0].clientHeight) {
            scrollViewRef.value.scrollTop += 1;
        } else {
            scrollViewRef.value.scrollTop = 0;
        }
    }, 30);
};

onBeforeUnmount(() => {
    //离开页面清理定时器
    intervalId && clearInterval(intervalId); 
    intervalId && clearInterval(auto);
});



const loadData = async () => {
    let res = await getzxphList();
    const arr = res.data.data
    twoList.value=[]
    firstList.value=[]
    scrollViewRef.value.scrollTop = 0;
    twoList.value = arr.splice(3)
    firstList.value = arr
};

</script>

<style lang="scss" scoped>
.all {

    width: 100%;
    height: 100%;
    padding: 2%;
    box-sizing: border-box;
    border-radius: 0.625rem;
    background-color: #091432;
    overflow: hidden;

    .bot {
        display: flex;
        width: 100%;
        flex-direction: column;
        padding: 1.25rem 0;
        height: 100%;

        .bot-bot {
            margin: 0.9375rem 0;
            flex: 1;
            overflow: hidden;
            display: flex;
            align-items: center;

            .three {
                width: 30%;
                // flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                // font-size: 1.4375rem;
                font-size:calc(100vw * 23 / 1920); 
                color: #c47845;
                font-weight: bold;
            }

            .two {
                //flex: 1;//
                width: 20%;
                display: flex;
                align-items: center;
                justify-content: center;
                // font-size: 1.25rem;
                font-size:calc(100vw * 20 / 1920); 
                font-weight: bold;
            }

            .one {
                flex: 1;
                display: flex;
                align-items: center;
                text-align: center;
                // justify-content: center;
                // font-size: 0.9375rem;
                font-size:calc(100vw * 15 / 1920); 
                font-weight: bold;

                .icon {
                    width: 1.25rem;
                    height: 1.25rem;
                }

                .avcter {
                    border: 2px solid #fff;
                    // width: 3.125rem;
                    // height: 3.125rem;
                    width: calc(100vw * 50 / 1920);
                    height: calc(100vw * 50 / 1920);
                    border-radius: 50%;
                    margin: 0 0.3125rem;
                }
            }
        }

        .bot-top {
            display: flex;
            align-items: center;
            color: #3e458b;
            font-weight: bold;
            width: 100%;
            .two{
                width: 20% !important;
            }
            .three{
                width: 30% !important;
            }
            .one{
                flex: 1;
            }

            div {
                // flex: 1;
                text-align: center;
            }
        }
    }

    .tit {
        // font-size: 1.5625rem;
        font-size:calc(100vw * 25 / 1920); 
        font-weight: bold;
    }

    .top {
        margin-top: 3.125rem;
        display: flex;
        align-items: center;
        width: 100%;
        box-sizing: border-box;

        .card:nth-child(1) {
            background-color: #00bfa3;
        }

        .card:nth-child(2) {
            background-color: #f27e2a;
            margin-top: -5rem;

        }
        .card:nth-child(3) {
            background-color: #1641f5;
        }

        .card {
            flex: 1;
            margin: 0 0.625rem;
            border-radius: 1.25rem;
            padding: 0.625rem;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            .name{
                font-size: calc(100vw * 14 / 1920);
            }

            .list {
                display: flex;
                align-items: center;
                width: 100%;
                margin: 0.625rem 0;
                justify-content: space-between;

                .list-left {
                    color: #fff;
                    // font-size: 0.75rem;
                    font-size:calc(100vw * 12 / 1920); 
                    font-weight: bold;
                }

                .list-right {
                    color: #fff;
                    // font-size: 1rem;
                    font-size:calc(100vw * 16 / 1920); 
                    font-weight: bold;
                }
            }

            img {
                // width: 3.125rem;
                // height: 3.125rem;
                width: calc(100vw * 50 / 1920);
                height: calc(100vw * 50 / 1920);
                border-radius: 50%;
                margin-top: -2.1875rem;
                border: 3px solid #fff;
            }
        }
    }
}
</style>